<template>
  <div class="severTwoHeader">
    <!-- 头 -->
    <div class="fixed">
       <div class="header">
      <h1>&lt;</h1>
      <p>咨询</p>
    </div>

    <!-- 导航 -->
    <div class="navs">
      <ul class="nav">
        <li v-for="(na, index) in nav" :key="index">{{ na }}</li>
      </ul>
    </div>
    </div>
   

    <!-- 新闻列表 -->
    <div class="list">
      <ul @click="goNewsDetail" v-for="(content, index) in contents" :key="index">
        <div class="list-L">
          <h3 v-html="content.text"></h3>
          <h4>
            <span>专栏</span>{{ content.time }}
          </h4>
        </div>
        <div class="list-R">
          <img src="../../../../public/imgs/5.png" alt="" />
          <p><img src="../../../../public/imgs/6.png" alt="" /> 24</p>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "severTwoHeader",
  data() {
    return {
      nav: [
        "最新",
        "球鞋",
        "时尚",
        "运动",
        "动漫",
        "游戏",
        "其他",
        "最新",
        "球鞋",
        "时尚",
        "运动",
        "动漫",
        "游戏",
        "其他",
      ],
      contents: [
        {
          text: "苹果140W氮化镓充电器平替：IDMIX <br />PD3.1快充极速满血，又小又快",
          spa: "专栏",
          time: "56分钟前",
          img: "../../../../public/imgs/5.png",
        },
        {
          text: "苹果140W氮化镓充电器平替：IDMIX <br />PD3.1快充极速满血，又小又快",
          spa: "专栏",
          time: "56分钟前",
          img: "../../../../public/imgs/5.png",
        },
        {
          text: "苹果140W氮化镓充电器平替：IDMIX <br />PD3.1快充极速满血，又小又快",
          spa: "专栏",
          time: "56分钟前",
          img: "../../../../public/imgs/5.png",
        },
        {
          text: "苹果140W氮化镓充电器平替：IDMIX <br />PD3.1快充极速满血，又小又快",
          spa: "专栏",
          time: "56分钟前",
          img: "../../../../public/imgs/5.png",
        },
        {
          text: "苹果140W氮化镓充电器平替：IDMIX <br />PD3.1快充极速满血，又小又快",
          spa: "专栏",
          time: "56分钟前",
          img: "../../../../public/imgs/5.png",
          img1: "../../../../public/imgs/6.png",
        },
      ],
    };
  },
  methods: {
    goNewsDetail() {
      this.$router.push("/serviceC");
    },
  },
};
</script>

<style scoped>
.severTwoHeader {
  background-color: #ffffff;
}
.fixed{
  position: fixed;
  top: 0;
  background-color: white;
  /* border-bottom: 1px gray solid; */
}
.header {
  /* width: 100%; */
  height: 0.6rem;
  display: flex;
  align-items: center;
  margin: 0 0.2rem;

}
.header p {
  text-indent: 1.3rem;
  font-weight: bold;
}
.navs {

  width: 100%;
  height: 0.3rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  float: 1;
}
.nav {
  width: 200%;
  height: 0.3rem;
  display: flex;
  margin-left: 0.2rem;
}
.nav li {
  width: 0.6rem;
  height: 0.3rem;
  font-size: 0.1rem;
  line-height: 0.3rem;
  color: #acabb2;
}
.nav li:hover {
  font-size: 0.14rem;
  font-weight: bold;
  color: black;
}

.list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
    margin-top: 00.6rem;
  /* overflow: hidden; */
  overflow: auto;
}
.list ul {
  height: 1.2rem;
  margin-left: 0.2rem;
  display: flex;
  border-bottom: solid 2px #f2f2f2;
  margin-top: 0.12rem;
}
.list-L {
  font-size: 0.13rem;
}
.list-L h4 {
  margin-top: 0.5rem;
  color: #c2c1c8;
  font-size: 0rem;
}
.list-L h4 span {
  display: block;
  font-weight: bold;
  color: #ffffff;
  width: 0.33rem;
  height: 0.18rem;
  text-align: center;
  line-height: 0.18rem;
  background-color: black;
  margin-right: 0.1rem;
}
.list-R p img {
  width: 0.16rem;
  height: 0.1rem;
  vertical-align: middle;
}
.list-R img {
  width: 0.92rem;
  height: 0.68rem;
  background-color: red;
}
.list-R p {
  color: #c2c1c8;
  font-size: 0.1rem;
  text-align: end;
  margin-top: 0.2rem;
}
</style>